const path = require('path') // 引入 path 模块
const { CleanWebpackPlugin } = require('clean-webpack-plugin') // 引入 clean-webpack-plugin 插件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入 html-webpack-plugin 插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 引入 mini-css-extract-plugin 插件
const { VueLoaderPlugin } = require('vue-loader') // 引入 vue-loader 插件

module.exports = {

  // 生成 Source Map 文件
  devtool: 'eval-source-map',

  // 入口文件
  entry: './src/main.js',

  // 打包输出
  output: {
    // 注意需要使用 process.cwd() 获取到当前的工作目录
    path: path.join(process.cwd(), 'dist'), // 输出路径
    filename: 'app.[contenthash].js' // 输出文件名
  },

  module: {
    rules: [
      // 处理纯 css 样式文件
      {
        test: /\.css$/i, // 匹配 css 文件
        use: [MiniCssExtractPlugin.loader, 'css-loader'] // 使用 MiniCssExtractPlugin 和 css-loader
      },
      // 处理 sass|scss 样式文件
      {
        test: /\.(scss|sass)$/i, // 匹配 sass 或 scss 文件
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] // 使用 MiniCssExtractPlugin、css-loader 和 sass-loader
      },
      // 处理图片和字体文件
      {
        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i, // 匹配图片和字体文件
        type: "asset" // 使用 asset 模块类型
      },
      // 处理 ES6+ 语法
      {
        test: /\.m?js$/i, // 匹配 js 文件
        exclude: /(node_modules|bower_components)/, // 排除 node_modules 和 bower_components 目录
        use: {
          loader: 'babel-loader', // 使用 babel-loader
          options: {
            presets: ['@babel/preset-env'], // 使用 @babel/preset-env 预设
            plugins: ['@babel/plugin-transform-runtime'] // 使用 @babel/plugin-transform-runtime 插件
          }
        }
      },
      {
        test: /\.vue$/i, // 匹配 vue 文件
        use: 'vue-loader' // 使用 vue-loader
      }
    ]
  },

  plugins: [
    // 生成 index.html
    new HtmlWebpackPlugin({
      template: './public/index.html' // 指定模板文件
    }),

    // 抽取样式
    new MiniCssExtractPlugin(),

    // 打包清理
    new CleanWebpackPlugin(),

    // 处理 Vue 组件
    new VueLoaderPlugin()
  ],

  resolve: {
    alias: {
      // 为 src 目录设置别名 @
      '@': path.resolve(process.cwd(), 'src')
    }
  }
}